<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./css/normalize.css">
    <link rel="stylesheet" href="./css/styletext06.css">
    <title>信息采集</title>
</head>

<body>
    <!-- 返回上一级 -->
    <header class="header">
        <a href="./styletext05.html"><img src="./images/arrow-double-left.png" alt=""></a>
    </header>
    <h3>你的个性偏好</h3>

    <!-- 注释部分 -->
    <section class="zhushi">
        <p>*请至少选择3项</p>
    </section>
    <!-- 个性偏好部分 -->
    <section class="favchoice1">
        <div class="fav-sec-box">
            <div class="fav-box">
                逛街
            </div>
        </div>
        <div class="fav-sec-box">
            <div class="fav-box">
                追星
            </div>
        </div>
        <div class="fav-sec-box">
            <div class="fav-box">
                旅游
            </div>
        </div>
        <div class="fav-sec-box">
            <div class="fav-box">
                宅家
            </div>
        </div>
    </section>

    <section class="favchoice2">
        <div class="fav-sec-box">
            <div class="fav-box">
                校园风
            </div>
        </div>
        <div class="fav-sec-box">
            <div class="fav-box">
                炫酷街头
            </div>
        </div>
        <div class="fav-sec-box">
            <div class="fav-box">
                新文化
            </div>
        </div>
    </section>

    <section class="favchoice3">
        <div class="fav-sec-box">
            <div class="fav-box">
                日系小清新
            </div>
        </div>
        <div class="fav-sec-box">
            <div class="fav-box">
                cospaly爱好者
            </div>
        </div>
    </section>

    <section class="favchoice1">
        <div class="fav-sec-box">
            <div class="fav-box">
                jk
            </div>
        </div>
        <div class="fav-sec-box">
            <div class="fav-box">
                国风
            </div>
        </div>
        <div class="fav-sec-box">
            <div class="fav-box">
                潮牌
            </div>
        </div>
        <div class="fav-sec-box">
            <div class="fav-box">
                职场
            </div>
        </div>
    </section>

    <!-- 下一步按钮 -->
    <section class="nextbutton">
        <a href="#"><button id="btn" >前往搭配</button></a>
    </section>

    <script src="./js/flexible.js"></script>

    <script>
        var favtag = document.getElementsByClassName('fav-box')
        for (var i = 0; i < favtag.length; i++) {
            favtag[i].onclick = function() {
                console.log('2221');
                if (this.style.backgroundColor == '#7cddf6') {
                    console.log('1111'); //还未解决背景颜色变化问题
                    this.style.backgroundColor = '#F2F4F7';
                } else {
                    this.style.backgroundColor = '#7cddf6'
                    this.color = '#fff'
                }

            }
        }
    </script>

</body>



</html>